
<!--
 * @Author: @miao-xiongmei 2575733397@qq.com
 * @Date: 2022-07-15 10:12:46
 * @LastEditors: @miao-xiongmei 2575733397@qq.com
 * @LastEditTime: 2022-07-27 23:30:32
 * @FilePath: \tainfuhealh\src\components\bookingManagement\search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <!-- 搜索框：按套餐名称搜索 -->
        <el-row :gutter="20">
            <el-col :span="8">
                <el-col :span="18" style="padding-left: 0;">
                    <el-input v-model="userInfo.packageName" placeholder="请输入套餐名称"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="seachPackage()">查询</el-button>
                </el-col>
            </el-col>
        </el-row>
        <!-- 新增套餐按钮 -->
        <el-button type="primary" class='addPackage' @click="addPackageBtn()">新增
        </el-button>
        <!-- 套餐表格 -->
        <el-table :data="packageTable" style="width: 100%; text-align: center; "
            :header-cell-style="{ 'background-color': 'rgb(39,49,70)', 'text-align': 'center', 'color': 'white' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="套餐编码">
            </el-table-column>
            <el-table-column prop="packageName" label="套餐名称">
            </el-table-column>
            <el-table-column prop="nickname" label="助记名">
            </el-table-column>
            <el-table-column prop="sex" label="适用性别">
            </el-table-column>
            <el-table-column prop="applicableAge" label="适用年龄">
            </el-table-column>
            <el-table-column prop="price" label="套餐价格">
            </el-table-column>
            <el-table-column prop="introduce" label="套餐说明">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope='scope'>
                    <el-button size="mini" @click="updatePackage(scope.row.id)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deletePackage(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <paging :total="total" :userInfo="userInfo"></paging>
        <!-- 编辑套餐模态框 -->
        <el-dialog title="编辑套餐" :visible.sync="updatePackageFormVisible" width="70%">
            <el-tabs v-model="activeName">
                <!-- 基本信息表单 -->
                <el-tab-pane label="基本信息" name="first">
                    <el-form :model="updatePackageForm" :rules="rules" ref="updatePackageForm" label-width="100px"
                        class="demo-updatePackageForm" style="width:95%;float:left;">
                        <el-form-item label="套餐编码" prop="id">
                            <el-input v-model.number="updatePackageForm.id" readonly disabled placeholder="自动生成">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="套餐名称" prop="packageName">
                            <el-input v-model="updatePackageForm.packageName"></el-input>
                        </el-form-item>
                        <el-form-item label="套餐助记" prop="nickname">
                            <el-input v-model="updatePackageForm.nickname"></el-input>
                        </el-form-item>
                        <el-form-item label="适用性别" prop="sex">
                            <el-select v-model.number="updatePackageForm.sex" placeholder="请选择适用性别" style="width:100%">
                                <el-option label="不限" value="0"></el-option>
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="价格" prop="price">
                            <el-input v-model.number="updatePackageForm.price"></el-input>
                        </el-form-item>
                        <el-form-item label="成本价" prop="cost">
                            <el-input v-model.number="updatePackageForm.cost"></el-input>
                        </el-form-item>
                        <el-form-item label="套餐介绍" prop="introduce" style="width:100%;float:left;">
                            <el-input type="textarea" v-model="updatePackageForm.introduce"></el-input>
                        </el-form-item>
                        <el-form-item label="注意事项" prop="attention" style="width:100%;float:left;">
                            <el-input type="textarea" v-model="updatePackageForm.attention" style="height:90px;">
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div style="width: 100%;text-align: right;">
                        <el-button @click="updatePackageFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitUpdatePackage('updatePackageForm')">确 定</el-button>
                    </div>
                </el-tab-pane>
                <!-- 项目信息表单 -->
                <el-tab-pane label="项目信息" name="second">
                    <div>
                        <!-- 上方添加框 -->
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-col :span="18" style="padding-left: 0;">
                                    <!-- 要修改 -->
                                    <el-select v-model="userInfo2.id" placeholder="请选择项目">
                                        <el-option v-for="item in project" :key="item.id" :label="item.projectName"
                                            :value="item.id"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-button type="primary" @click="addPackageProject()">新增
                                    </el-button>
                                </el-col>
                            </el-col>
                        </el-row>
                        <!-- 套餐项目表 -->
                        <el-table :data="packageProjectTable"
                            style="width: 100%; text-align: center;margin-bottom: 30px; "
                            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                            <el-table-column prop="num" label="项目编码">
                            </el-table-column>
                            <el-table-column prop="projectName" label="项目名称">
                            </el-table-column>
                            <el-table-column prop="projectDescription" label="项目说明">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope='scope'>
                                    <el-button size="mini" type="danger" @click="deletePackageProject(scope.row.id)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="width: 100%;text-align: right;">
                            <el-button @click="updatePackageFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="updatePackageFormVisible = false">确定</el-button>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
        <!-- 新增套餐模态框 -->
        <el-dialog title="新增套餐" :visible.sync="addPackageFormVisible" width="70%">
            <el-tabs v-model="activeName" :before-leave="beforeHandle">
                <!-- 基本信息表单 -->
                <el-tab-pane label="基本信息" name="first">
                    <el-form :model="addPackageForm" :rules="rules" ref="addPackageForm" label-width="100px"
                        class="demo-addPackageForm" style="width:95%;float:left;">
                        <el-form-item label="套餐编码" prop="id">
                            <el-input v-model.number="addPackageForm.id" readonly disabled placeholder="自动生成">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="套餐名称" prop="packageName">
                            <el-input v-model="addPackageForm.packageName"></el-input>
                        </el-form-item>
                        <el-form-item label="套餐助记" prop="nickname">
                            <el-input v-model="addPackageForm.nickname"></el-input>
                        </el-form-item>
                        <el-form-item label="适用性别" prop="sex">
                            <el-select v-model.number="addPackageForm.sex" placeholder="请选择适用性别" style="width:100%">
                                <el-option label="不限" value="0"></el-option>
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="价格" prop="price">
                            <el-input v-model.number="addPackageForm.price"></el-input>
                        </el-form-item>
                        <el-form-item label="成本价" prop="cost">
                            <el-input v-model.number="addPackageForm.cost"></el-input>
                        </el-form-item>
                        <el-form-item label="套餐介绍" prop="introduce" style="width:100%;float:left;">
                            <el-input type="textarea" v-model="addPackageForm.introduce"></el-input>
                        </el-form-item>
                        <el-form-item label="注意事项" prop="attention" style="width:100%;float:left;">
                            <el-input type="textarea" v-model="addPackageForm.attention" style="height:90px;">
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div style="width: 100%;text-align: right;">
                        <el-button @click="addPackageFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitAddPackage('addPackageForm')">确 定</el-button>
                    </div>
                </el-tab-pane>
                <!-- 项目信息表单 -->
                <el-tab-pane label="项目信息" name="second">
                    <div>
                        <!-- 上方添加框 -->
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-col :span="18" style="padding-left: 0;">
                                    <!-- 要修改 -->
                                    <el-select v-model="userInfo2.id" placeholder="请选择项目">
                                        <el-option v-for="item in project" :key="item.id" :label="item.projectName"
                                            :value="item.id"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-button type="primary" @click="addPackageProject()">新增
                                    </el-button>
                                </el-col>
                            </el-col>
                        </el-row>
                        <!-- 套餐项目表 -->
                        <el-table :data="packageProjectTable"
                            style="width: 100%; text-align: center;margin-bottom: 30px; "
                            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                            <el-table-column prop="num" label="项目编码">
                            </el-table-column>
                            <el-table-column prop="projectName" label="项目名称">
                            </el-table-column>
                            <el-table-column prop="projectDescription" label="项目说明">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope='scope'>
                                    <el-button size="mini" type="danger" @click="deletePackageProject(scope.row.id)">删除
                                    </el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                        <div style="width: 100%;text-align: right;">
                            <el-button @click="addPackageFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addPackage()">确定</el-button>
                        </div>
                    </div>
                </el-tab-pane>

            </el-tabs>
        </el-dialog>

    </div>


</template>

<script>
import paging from '../../components/book/paging.vue'
export default {
    data() {
        return {
            // currentPage: 1,
            total: 0,
            tabs: false,
            userInfo: {
                packageName: '',
                limit: 5,
                page: 1,
            },
            userInfo2: {
                id: '',
                limit: 10,
                page: 1,
            },
            // 项目信息的下拉列表数据
            project: [{
            }],
            // 编辑套餐表单中所含项目表格数据
            packageProjectTable: [],
            activeName: 'first',
            // 新增套餐表单可见性
            addPackageFormVisible: false,
            // 编辑套餐表单可见性
            updatePackageFormVisible: false,
            // 新增套餐中项目的表单可见性
            addPackageProjectVisible: false,
            // 包含项目的套餐表格数据(最开始页面的表格)
            packageTable: [{
            }],
            // 新增套餐的基本数据
            addPackageDataArr: [],
            // 新增套餐表单
            addPackageForm: {
                id: '',
                num: '',
                packageName: '',
                sex: '',
                nickname: '',
                price: '',
                cost: '',
                introduce: '',
                attention: '',
            },
            // 编辑套餐表单
            updatePackageForm: {
                id: '',
                num: '',
                packageName: '',
                sex: '',
                mnemonicName: '',
                // minAge: '',
                // maxAge: '',
                price: '',
                cost: '',
                introduce: '',
                attention: '',
            },
            // 表单验证规则
            rules: {

                packageName: [
                    { required: true, message: "请输入套餐名称", trigger: "blur" }
                ],
                sex: [
                    { required: true, message: "请选择适用性别", trigger: "blur" },
                ],
                mnemonicName: [
                    { message: "请输入套餐助记名", trigger: "blur" }
                ],
                // applicableAge: [
                //     { message: "请输入适用年龄", trigger: "blur" }
                // ],
                maxAge: [
                    { message: "请输入适用最大年龄", trigger: "blur" }
                ],
                minAge: [
                    { message: "请输入适用最小年龄", trigger: "blur" },
                    { pattern: /(^[1-9]\d*(\.\d{1,2})?$)/, message: "请输入正确的价格", trigger: "blur" }
                ],
                price: [
                    { required: true, message: '请输入套餐价格', trigger: 'blur' },
                    { pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: "请输入正确的价格", trigger: "blur" }
                ],
                cost: [
                    { required: true, message: '请输入成本价', trigger: 'blur' },
                    { pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: "请输入正确的成本价", trigger: "blur" }
                ],
                introduce: [
                    { message: '请输入套餐介绍', trigger: 'blur' }
                ],
                attention: [
                    { message: '请输入注意事项', trigger: 'blur' }
                ]
            },
        }
    },
    components: {
        paging
    },
    methods: {
        // 删除套餐中的项目
        deletePackageProject(projectId) {
            //////console.log(projectId)
            const confirmResult = this.$confirm('此操作将永久删除套餐中该项目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$axios({
                        method: "get",
                        url: "/packagemanagement/deleteproject",
                        params: { projectId },
                    })
                        .then(res => {
                            if (res.code === 0) {
                                this.getPackageProjectAll(this.addPackageDataArr.id);
                                this.$message.success("删除套餐中项目成功！")
                            } else {
                                this.$message.error("删除套餐中项目失败！")
                            }
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        // 根据名字查询套餐
        seachPackage() {
            this.$axios({
                method: "post",
                url: "/packagemanagement/list",
                data: this.userInfo,
            })
                .then(res => {
                    if (res.code === 0) {
                        this.packageTable = res.data;
                        //////console.log(res.data)
                    } else {
                        //////console.log(this.userInfo);
                        //////console.log(res.data)
                    }
                })
        },
        // 新增套餐按钮
        addPackageBtn() {
            this.addPackageFormVisible = true;
            this.activeName = 'first';
            this.tabs = false;
            this.addPackageForm = {};
            this.addPackageDataArr = [];
            this.packageProjectTable = []

        },
        // 编辑套餐按钮
        updatePackage(id) {
            this.updatePackageFormVisible = true;
            this.$axios({
                method: "get",
                url: "/packagemanagement/findid",
                params: { id },
            })
                .then(res => {
                    if (res.code === 0) {
                        this.updatePackageForm = res.data;
                        this.addPackageDataArr = res.data;
                        this.getPackageProjectAll(id)
                    } else {
                    }
                })
        },
        beforeHandle() {
            //////console.log(this.tabs)
            if (this.tabs === false && this.activeName == 'first') {
                this.$message.warning('请先填写套餐基本信息并提交！再进行其他操作。');
                return false;
            } else if (this.tabs === false && this.activeName == 'second') {
                this.$message.warning('新增套餐信息已提交，无法返回！');
                return false;
            }
        },
        addPackage() {
            this.addPackageFormVisible = false;
            this.getAll();
            this.tabs = true;
        },
        // 删除套餐
        deletePackage(id) {
            // 弹框询问用户是否删除数据
            const confirmResult = this.$confirm('此操作将永久删除该套餐, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$axios({
                        method: "post",
                        url: "/packagemanagement/deleted",
                        params: { id },
                    })
                        .then(res => {
                            if (res.code === 0) {
                                this.getAll();
                                this.$message.success("删除套餐成功！")
                            } else {
                                this.$message.error("删除套餐失败！")
                            }
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        // 提交编辑套餐表单
        submitUpdatePackage(formName) {
            //////console.log(111)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios({
                        method: "post",
                        url: "/packagemanagement/update",
                        data: this.updatePackageForm
                    })
                        .then(res => {
                            if (res.code === 0) {
                                this.getAll()
                                this.$message.success('编辑套餐基本信息成功！')
                                this.activeName = 'second';
                            } else {
                                this.$message.error("新增套餐基本信息失败！")
                            }
                        })

                } else {
                    ////console.log('error submit!!');
                    return false;
                }
            });
        },
        // 提交新增套餐表单
        submitAddPackage(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    ////console.log(this.packageProjectTable)
                    this.$axios({
                        method: "post",
                        url: "/packagemanagement/add",
                        data: this.addPackageForm
                    })
                        .then(res => {
                            if (res.code === 0) {
                                this.addPackageData();
                                this.tabs = true;
                                this.activeName = 'second';
                                this.getPackageProjectAll(this.addPackageDataArr.id)

                            } else {
                                this.$message.error("新增套餐失败！")
                            }
                        })
                    // }

                } else {
                    ////console.log('error submit!!');
                    return false;
                }
            });
        },
        // 获取新增套餐的基本数据
        addPackageData() {
            this.$axios({
                method: "get",
                url: "/packagemanagement/selectpackage",
            })
                .then(res => {
                    if (res.code === 0) {
                        this.addPackageDataArr = res.data[res.data.length - 1];
                        // ////console.log(this.addPackageDataArr)
                        // ////console.log(this.addPackageDataArr.length)
                    } else {
                        ////console.log(res.data)
                    }
                })
        },
        // 添加套餐的项目
        addPackageProject() {
            // ////console.log(2222)
            this.$axios({
                method: "post",
                url: "/packagemanagement/addject",
                data: {
                    "packageId": this.addPackageDataArr.id, "projectId": this.userInfo2.id
                },
            })
                .then(res => {
                    if (res.code === 0) {
                        ////console.log(this.addPackageDataArr.id)
                        this.$message.success("新增套餐项目成功！")
                        this.getPackageProjectAll(this.addPackageDataArr.id)
                        ////console.log(res.data)
                        ////console.log(this.packageProjectTable)
                    } else {
                    }
                })
        },

        // 渲染原始表格
        getAll() {
            this.$axios({
                method: "post",
                url: "/packagemanagement/list",
                data: this.userInfo,
            })
                .then(res => {
                    if (res.code === 0) {
                        this.packageTable = res.data;
                        this.total = res.count;
                        for (let i = 0; i < res.data.length; i++) {
                            this.packageTable[i].applicableAge = res.data[i].minAge + '-' + res.data[i].maxAge;
                            if (res.data[i].sex == 0) {
                                this.packageTable[i].sex = '不限'
                            } else if (res.data[i].sex == 1) {
                                this.packageTable[i].sex = '男'
                            } else if (res.data[i].sex == 2) {
                                this.packageTable[i].sex = '女'
                            }
                        }
                    } else {
                        console.log(res.data)
                    }
                })
        },
        // 渲染套餐中项目表格和下拉框
        getPackageProjectAll(id) {
            this.$axios({
                method: "post",
                url: "/packagemanagement/addlist",
                data: { 'id': id, 'limit': 5, 'page': '1' },
            })
                .then(res => {
                    if (res.code === 0) {

                        if (res.data == "没有套餐") {
                            this.packageProjectTable = [];
                        } else {
                            this.packageProjectTable = res.data;
                        }
                        this.$axios({
                            method: "post",
                            url: "/checkitemmanagement/list",
                            data: { 'limit': 10, 'page': 1 },
                        })
                            .then(res => {
                                if (res.code === 0) {
                                    ////console.log(res.data)
                                    ////console.log(this.packageProjectTable)
                                    this.project = res.data;
                                    if (this.packageProjectTable.length == 0) {
                                        this.project = res.data;
                                    } else {
                                        // 修改
                                        ////console.log(this.project)
                                        this.project.forEach((itemA, indexA) => {
                                            this.packageProjectTable.forEach(itemB => {
                                                if (itemA.id === itemB.num) {
                                                    this.project.splice(indexA, 1)
                                                }
                                            })
                                        })
                                        // this.project = this.project.filter(v => this.packageProjectTable.findIndex(el => el === v) === -1);
                                        ////console.log(this.project)
                                    }

                                } else {

                                }
                            })
                    } else {
                    }
                })
        },
    },
    created() {
        this.getAll();
    },
}
</script>

<style scoped>
.addPackage {
    margin: 30px 0;
}

.el-dialog {
    overflow: hidden;
}

.el-form>.el-form-item {
    width: 50%;
    float: left;
}

.el-row {
    margin: 20px 0;
}

.dialog-footer {
    margin: 20px;
}
</style>